<template>
    <div>
        <cvue-dialog
            :dialogVisible="loaddingVisible"
            title="导入数据"
            :isShowFoot="false"
            dialogWidth="30%"
            @handleOpen="getDetail"
            @closeDialog="closeDialog"
            @confirmDialog="confirmDialog"
            @handleClose="handleClose"
            >
                <div slot="dialogBody" class="the-body">
                        <div v-for="(item, index) in errList" :key="index" class="red">{{item}}</div>
                        <div class="sub-tr">
                            <div class="sub-td-1">1、部门数据</div>
                            <div class="sub-td-2">
                                <div>已生成</div> 
                            </div>
                            <div class="sub-td-3">
                                <i v-if="isOverDept" class="el-icon-check green"></i>
                                <i v-else class="el-icon-loading blue"></i>
                                
                            </div>
                        </div>
                         <div class="sub-tr">
                            <div class="sub-td-1">2、教职工信息导入</div>
                            <div class="sub-td-2">
                                <div>已生成</div> 
                            </div>
                            <div class="sub-td-3">
                                <i v-if="isOverTeacher" class="el-icon-check green"></i>
                                <i v-else class="el-icon-loading blue"></i>
                            </div>
                        </div>
                         <div class="sub-tr">
                            <div class="sub-td-1">3、学生&家长信息导入</div>
                            <div class="sub-td-2">
                                <div>已生成</div> 
                            </div>
                            <div class="sub-td-3">
                                 <i v-if="isOverStudent" class="el-icon-check green"></i>
                                <i v-else class="el-icon-loading blue"></i>
                            </div>
                        </div>
                         <div class="sub-tr">
                            <div class="sub-td-1">4、学期数据</div>
                            <div class="sub-td-2">
                                <div>已生成</div> 
                            </div>
                            <div class="sub-td-3">
                                 <i v-if="isOverTerm" class="el-icon-check green"></i>
                                <i v-else class="el-icon-loading blue"></i>
                            </div>
                        </div>

                        <div class="pro-div">
                            <el-progress :text-inside="true" :stroke-width="26" :percentage="progress" status="success"></el-progress>
                        </div>
                </div>
        </cvue-dialog>
    </div>
</template>
<script>
import cvueTable from '@/components/cvue-table'
import cvueDialog from '@/components/cvue-dialog'
export default {
    components: {
        cvueTable, cvueDialog
    },
    props: {
        progress: {
            type: Number,
            default: 0
        },
       isOverDept: {
           type: Boolean,
            default: false
       },
       isOverTeacher: {
           type: Boolean,
            default: false
       },
       isOverStudent: {
           type: Boolean,
            default: false
       },
       isOverTerm: {
           type: Boolean,
            default: false
       },
       errList: {
           type: Array,
           default: function () {
               return []
           }
       }
    },
     computed: {
        loaddingVisible () {
            return this.$store.state.initSchool.loaddingVisible
        }
     },
     methods: {
         getDetail () {

         },
        // 触发事件
        handleClose () {
            this.closeDialog()
        },
        closeDialog () {
            this.clear()
            this.$store.state.initSchool.loaddingVisible = false
        },
        confirmDialog () {
            this.closeDialog()
        },
        clear () {
            Object.assign(this.$data, this.$options.data())
        }
    }
}
</script>
<style scoped>
.sub-tr{font-size: 20px;}
.sub-td-1{display: inline-block;vertical-align: middle;width: 300px; padding: 20px 0;}
.sub-td-2{display: inline-block;vertical-align: middle;width: 100px; padding: 20px 0;}
.sub-td-3{display: inline-block;vertical-align: middle;width: 100px; padding: 20px 0;}
.green{color: #67c23a;}
.blue{color: #409eff;}
.pro-div{
    padding: 20px 0;
}
.red{
    color: red;
}
</style>
